<template>
    <div class="balance">
        <Header @data-event="handleChildEvent"></Header>
        <div style="height: 88px;"></div>
        <!-- 头部 -->
        <!-- <div class="balanceheader">
            <div class="header-logo" @click="gotohome">
                <img src="../../static/imgs/logo.png" alt="">
            </div>
            <div class="header-content">
                <div class="header-content-left">
                    <div class="line"></div>
                    <div class="avatarandusername">
                        <div><img class="avatar" :src="userinfo.avatar" alt=""></div>
                        <div class="name"> {{ this.userinfo.nickname }}</div>
                    </div>
                    <div class="curpointer">

                        <div>结账</div>
                        <div class="inputbox">
                            <el-input v-model="searchval" placeholder="请输入内容"></el-input>
                        </div>
                        <div class="search">
                            <i class="el-icon-search"></i>
                        </div>
                    </div>
                </div>
                <div class="header-content-rigth">

                    <div class="curpointer"><i class="el-icon-shopping-cart-full"></i>购物车</div>
                    <div class="curpointer"><i class="el-icon-message-solid"></i>通知</div>
                </div>

            </div>
        </div> -->
        <div class="product-box">
            <!-- 商品信息 -->
            <div class="productmessage">
                <div class="productmessage-box">
                    <p>{{ $t('assemble.订单商品') }}</p>
                    <p>{{ $t('assemble.单价') }}</p>
                    <p>{{ $t('assemble.数量') }}</p>
                    <p>{{ $t('assemble.商品小计') }}</p>
                </div>
                <div class="productmessagebottom">
                    <div class="promessage" style=" width: 790px;text-align: center;">
                        <div class="message-img">
                            <img :src="imgbanner" alt="">
                        </div>
                        <!-- <div class="ewm-box ">
                            <img :src="imgewm" alt="">
                            <p>147852369987</p>
                            <p>147852369987</p>
                        </div> -->
                        <div class="name">
                            {{ product.name }}
                        </div>
                    </div>
                    <!-- 单价 -->
                    <div style=" width: 100px ; text-align: center;">
                        ￥{{ product.price }}
                    </div>
                    <!-- 数量 -->
                    <div style=" width: 150px; text-align: center;">{{ formdetail.num.toLocaleString() }}</div>
                    <!-- 商品小计 -->
                    <div style=" width: 150px; text-align: center;">￥{{ (product.price * formdetail.num).toLocaleString() }}
                    </div>
                </div>

            </div>

            <!-- 商品详情页面传过来的数据 -->
            <div class="productdetail">
                <el-form ref="form" :model="formdetail" label-width="160px">
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <el-form-item :label="$t('assemble.授权区域')">
                                <el-input v-model="formdetail.userarea" :placeholder="$t('assemble.请输入内容')"
                                    :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item :label="$t('assemble.授权品牌')">
                                <el-input v-model="formdetail.authorizedbrand" :placeholder="$t('assemble.请输入内容')"
                                    :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item :label="$t('assemble.授权产品子类别')">
                                <el-input v-model="formdetail.sonauthorizedbrand" :placeholder="$t('assemble.请输入内容')"
                                    :disabled="true"></el-input>
                            </el-form-item>

                        </el-col>
                        <el-col :span="12">

                            <el-form-item :label="$t('assemble.授权渠道')">
                                <el-input v-model="formdetail.bazaar" :placeholder="$t('assemble.请输入内容')"
                                    :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item :label="$t('assemble.授权产品类别')">
                                <el-input v-model="formdetail.category" :placeholder="$t('assemble.请输入内容')"
                                    :disabled="true"></el-input>
                            </el-form-item>




                        </el-col>


                    </el-row>

                </el-form>

            </div>

            <!-- 结票信息 -->
            <el-form :model="formbalance" :rules="balancerange" ref="formbalance" label-width="150px">
                <div class="balance" style="position: relative;">
                    <div v-if="tipsFlag" style="color: red; position: absolute;top: 10px; font-size: 15px; left: 295px;">{{
                        $t('assemble.制造商名称输入完成后请按回车键') }}
                    </div>

                    <el-row :gutter="24">
                        <el-col :span="12">
                            <el-form-item :label="$t('assemble.制造商名称')" prop="manufacturer_name">
                                <el-select v-if="manufacturerlist" v-model="formbalance.manufacturer_name"
                                    :placeholder="$t('assemble.请选择')" @change="selectmanufacturer" filterable allow-create
                                    default-first-option @blur="handlezhizaoshang" @focus="handlefocuszhizaosahng">
                                    <el-option v-for="item in manufacturerlist" :key="item.id"
                                        :label="item.manufacturer_name" :value="item.manufacturer_name">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item :label="$t('assemble.联系人')" prop="liaisons">
                                <el-input v-model="formbalance.liaisons" :placeholder="$t('assemble.请输入联系人')"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('assemble.邮编')" prop="manufacturer_postcode">
                                <el-input v-model="formbalance.manufacturer_postcode"
                                    :placeholder="$t('assemble.请输入邮箱地址')"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('assemble.备注')" prop="remark">
                                <el-input type="textarea" :rows="5" :placeholder="$t('assemble.请输入备注')"
                                    v-model="formbalance.remark">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item :label="$t('assemble.制造商地址')" prop="manufacturer_site">
                                <el-input v-model="formbalance.manufacturer_site"
                                    :placeholder="$t('assemble.请输入制造商地址')"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('assemble.联系电话')" prop="manufacturer_mobile">
                                <el-input v-model="formbalance.manufacturer_mobile"
                                    :placeholder="$t('assemble.请输入联系人电话')"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </div>

                <!-- 送货地址 -->
                <div class="songaddress">
                    <div class="titleandadd">
                        <span>{{ $t('assemble.标签送货地址') }}</span>
                        <span style="color: red; cursor: pointer; margin-left: 30px;" @click="gotoAdress">{{
                            $t('assemble.点击添加地址') }}</span>
                    </div>
                    <!-- 地址列表 -->
                    <div class="addresslist">
                        <div class="addressbox" v-for="(item, index) in datalist" :class="cutfIndex == index ? 'red' : ''"
                            @click="selectsadress(index, item.id)">
                            <p class="gongsi">{{ item.company }}</p>
                            <p class="text"><span>{{ item.name }}</span><span>{{ item.mobile }}</span></p>
                            <p class="text"><span>{{ item.site }}</span><span style="margin-left: 10px;">{{ item.postcode
                            }}</span></p>
                            <p class="defaul" v-show="item.default == '1'">{{ $t('assemble.默认地址') }}</p>

                        </div>
                    </div>
                </div>

                <!-- 开票信息 -->
                <div class="balance">
                    <p class="title">{{ $t('assemble.开票信息') }}</p>

                    <el-row :gutter="24">
                        <el-col :span="12">
                            <el-form-item :label="$t('assemble.开票类型')" prop="invoice_type">
                                <div class="inputbox">
                                    <el-select v-model="formbalance.invoice_type"
                                        :placeholder="$t('assemble.请选择增值税专用发票增值税普通发票')" size="585px">
                                        <el-option v-for="item in invoice_type" :key="item.id" :label="item.name"
                                            :value="item.name">
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                            <el-form-item :label="$t('assemble.购方税号')" prop="invoice_number">
                                <el-input :placeholder="$t('assemble.请输入购方税号')" v-model="formbalance.invoice_number">
                                </el-input>
                            </el-form-item>


                        </el-col>

                        <el-col :span="12">
                            <el-form-item :label="$t('assemble.购方名称')" prop="invoice_name">
                                <el-input :placeholder="$t('assemble.请输入购方姓名')" v-model="formbalance.invoice_name">
                                </el-input>
                            </el-form-item>

                        </el-col>
                    </el-row>
                </div>




                <!-- 发票收件人地址 -->
                <div class="songaddress">
                    <p class="title">{{ $t('assemble.电子发票接收人资料') }}</p>
                    <!-- 地址列表 -->
                    <div class="addresslist">
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item :label="$t('assemble.电子发票接收人邮箱')" prop="electronic_email" label-width="230px">
                                    <el-input :placeholder="$t('assemble.电子发票接收人邮箱')"
                                        v-model="formbalance.electronic_email">
                                    </el-input>
                                </el-form-item>
                                <el-form-item :label="$t('assemble.电子发票接收人手机号')" prop="electronic_mobile"
                                    label-width="230px">
                                    <el-input :placeholder="$t('assemble.电子发票接收人手机号')"
                                        v-model="formbalance.electronic_mobile">
                                    </el-input>
                                </el-form-item>

                            </el-col>
                        </el-row>

                        <!-- <div class="addressbox" v-for="(item, index) in datalist" :class="curIndex == index ? 'red' : ''"
                        @click="selectfadress(index, item.id)">
                        <p class="text"><span>{{ item.name }}</span><span style="margin-left: 10px;">{{ item.mobile
                        }}</span></p>
                        <p class="text"><span>{{ item.site }}</span><span style="margin-left: 10px;">{{ item.postcode
                        }}</span></p>

                        <p class="defaul" v-show="item.default == '1'">默认地址</p>
                    </div> -->
                    </div>

                </div>
            </el-form>

            <div class="bottom">
                <div class="btn" @click="submitOrder('formbalance')">{{ $t('assemble.立即下单') }}</div>
                <p>{{ $t('assemble.注产品运费顺丰到付') }}</p>
            </div>

        </div>
        <div style="height: 184px;"></div>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue';
import debounce from '@/utils/debounce.js';
import { getAdresslist, createorder, getmanufacturerlist, userArea } from '../../utils/api'

export default {
    components: {
        Footer,
        Header
    },
    data() {
        return {
            tipsFlag: false,
            fullscreenLoading: false,
            searchval: '',//搜索内容
            datalist: [],
            invoice_type: [{ id: 1, name: this.$t('assemble.电子发票增值税专用发票') }, { id: 2, name: this.$t('assemble.电子发票增值税普通发票') }],//开票类型
            formdetail: {
                bazaar: '',//授权渠道
                category: '',//产品类别
                authorizedbrand: '',//授权品牌
                sonauthorizedbrand: '',//授权品牌子类别
                product: '',//产品
                productdesc: '',//产品描述
                standby: '',//备用
            },//订单详情中选择的数据
            formbalance: {
                manufacturer_name: '',//制造商名称
                manufacturer_site: '',//制造商地址
                liaisons: '',//联系人
                manufacturer_mobile: '',//联系人电话
                manufacturer_postcode: '',//邮编
                remark: '',//备注
                invoice_type: '',//开票类型
                invoice_name: '',//购方姓名
                invoice_number: '',//购方税号
                invoice_mobile: '',//购方地址电话
                invoice_opening: '',//开户行
                invoice_bank: '',//银行账号
                electronic_email: '',//电子发票收件人邮箱
                electronic_mobile: '',// 电子发票收件人手机号

            },//制造商数据
            balancerange: {
                manufacturer_name: [
                    { required: true, message: this.$t('assemble.请输入制造商名称'), trigger: 'blur' },
                ],
                manufacturer_site: [
                    { required: true, message: this.$t('assemble.请输入制造商地址'), trigger: 'blur' },
                ],
                liaisons: [
                    { required: true, message: this.$t('assemble.请输入联系人'), trigger: 'blur' },
                ],
                manufacturer_mobile: [
                    { required: true, message: this.$t('assemble.请输入联系人电话'), trigger: 'blur' },
                ],
                // manufacturer_postcode: [
                //     { required: true, message: '请输入邮编', trigger: 'blur' },
                // ],
                // remark: [
                //     { required: true, message: '请输入备注', trigger: 'blur' },
                // ],
                invoice_type: [
                    { required: true, message: this.$t('assemble.请输入或选择开票类型'), trigger: 'blur' },
                ],
                invoice_name: [
                    { required: true, message: this.$t('assemble.请输入购方姓名'), trigger: 'blur' },
                ],
                invoice_number: [
                    { required: true, message: this.$t('assemble.请输入购方税号'), trigger: 'blur' },
                ],
                invoice_mobile: [
                    { required: true, message: this.$t('assemble.请输入购方地址电话'), trigger: 'blur' },
                ],
                invoice_opening: [
                    { required: true, message: this.$t('assemble.请输入开户行'), trigger: 'blur' },
                ],
                invoice_bank: [
                    { required: true, message: this.$t('assemble.请输入银行账号'), trigger: 'blur' },
                ],
                electronic_email: [
                    { required: true, message: this.$t('assemble.请输入电子发票收件人邮箱'), trigger: 'blur' },
                ]
            },
            // formkaipiao: {
            //     invoice_type: '',//开票类型
            //     invoice_name: '',//购方姓名
            //     invoice_number: '',//购方税号
            //     invoice_mobile: '',//购方地址电话
            //     invoice_opening: '',//开户行
            //     invoice_bank: '',//银行账号
            // },//开票信息
            // kaipiaorange: {
            //     invoice_type: [
            //         { required: true, message: '请输入或选择开票类型', trigger: 'blur' },
            //     ],
            //     invoice_name: [
            //         { required: true, message: '请输入购方姓名', trigger: 'blur' },
            //     ],
            //     invoice_number: [
            //         { required: true, message: '请输入购方税号', trigger: 'blur' },
            //     ],
            //     invoice_mobile: [
            //         { required: true, message: '请输入购方地址电话', trigger: 'blur' },
            //     ],
            //     invoice_opening: [
            //         { required: true, message: '请输入开户行', trigger: 'blur' },
            //     ],
            //     invoice_bank: [
            //         { required: true, message: '请输入银行账号', trigger: 'blur' },
            //     ],
            // },
            curIndex: null,
            cutfIndex: null,
            delivery: "",//收货地址id
            // invoicesite: "",//发票地址id
            manufacturerlist: [],//制造商列表
            userinfo: {},//用户信息
            product: {},//商品信息
            imgbanner: "",
            imgewm: "",
            areaList: [],
            ReorderData: {},
        }
    },
    created() {
        // console.log("详情页选择数据",this.$route.query.data)

        // this.formdetail = this.$route.query.data
        this.getAdresslist()
    },
    mounted() {

        // console.log("详情页选择数据", this.$route.query.data, this.$route.query.product)
        // this.product = this.$route.query.product
        this.product = JSON.parse(sessionStorage.getItem("product"))
        this.imgbanner = this.product.images[0]
        // this.imgewm = this.product.images[1]
        // this.formdetail = this.$route.query.data
        this.formdetail = JSON.parse(sessionStorage.getItem("data"))
        if (this.formdetail.userarea != '中国大陆') {
            this.invoice_type = [{
                id: 1, name: this.$t('assemble.商业发票')
            }]
        }
        console.log("formdetail", this.formdetail)
        this.getmanufacturerlist()
        this.userinfo = JSON.parse(localStorage.getItem("userinfo"))
        // console.log("userinfo", this.userinfo)

        // console.log(this.$route.query.addressback, "地址页面过来的")

        if (localStorage.getItem('ReorderData')) {
            this.ReorderData = JSON.parse(localStorage.getItem('ReorderData'))
            let manufacturerData = JSON.parse(this.ReorderData.manufacturer)
            // console.log("manufacturer", ReorderData.delivery.id)
            this.formbalance.manufacturer_name = manufacturerData.manufacturer_name
            this.formbalance.manufacturer_site = manufacturerData.manufacturer_site
            this.formbalance.manufacturer_mobile = manufacturerData.manufacturer_mobile
            this.formbalance.liaisons = manufacturerData.liaisons
            this.formbalance.remark = this.ReorderData.remark
            this.formbalance.manufacturer_postcode = manufacturerData.manufacturer_postcode
            this.formbalance.invoice_type = this.ReorderData.invoice_type
            this.formbalance.invoice_name = this.ReorderData.invoice_name
            this.formbalance.invoice_number = this.ReorderData.invoice_number
            this.formbalance.electronic_email = this.ReorderData.electronic_email
            this.formbalance.electronic_mobile = this.ReorderData.electronic_mobile == null ? "" : this.ReorderData.electronic_mobile
            console.log("地址列表", this.datalist)
            return
        }


        this.formbalance.electronic_email = localStorage.getItem('electronic_email')
        this.formbalance.electronic_mobile = localStorage.getItem('electronic_mobile') == null ? "" : localStorage.getItem('electronic_mobile')

        if (this.$route.query.addressback == "1") {
            this.formbalance = JSON.parse(localStorage.getItem("formbalance"))
        } else {

            let kaipiaodata = JSON.parse(localStorage.getItem("kaipiaomessage"))
            this.formbalance.invoice_type = kaipiaodata.invoice_type
            this.formbalance.invoice_name = kaipiaodata.invoice_name
            this.formbalance.invoice_number = kaipiaodata.invoice_number
            this.formbalance.invoice_mobile = kaipiaodata.invoice_mobile
            this.formbalance.invoice_opening = kaipiaodata.invoice_opening
            this.formbalance.invoice_bank = kaipiaodata.invoice_bank
        }
        
      


    },
    methods: {
        handleChildEvent(data) {
            if (this.formdetail.userarea != '中国大陆') {
                this.invoice_type = [{
                    id: 1, name: this.$t('assemble.商业发票')
                }]
            } else {
                this.invoice_type = [{ id: 1, name: this.$t('assemble.电子发票增值税专用发票') }, { id: 2, name: this.$t('assemble.电子发票增值税普通发票') }]
            }
        },
        handlefocuszhizaosahng() {
            this.tipsFlag = true
        },
        handlezhizaoshang(e) {
            this.tipsFlag = false
            console.log("onblur", this.formbalance.manufacturer_name, e)
        },
        async getAdresslist() {
            let res = await getAdresslist()
            if (res.code == 1) {
                // console.log("地址列表", res)
                this.datalist = res.data
                if (localStorage.getItem('ReorderData')) {
                    let data = JSON.parse(localStorage.getItem('ReorderData'))
                    this.datalist.forEach((item, index) => {
                        if (item.id == data.delivery.id) {
                            this.cutfIndex = index
                            this.delivery = item.id
                        }
                    })
                }

            }
            if (res.code == 401) {
                this.$router.push({ path: '/login' })
            }
        },
        //获取制造商列表
        async getmanufacturerlist() {
            let res = await getmanufacturerlist()
            if (res.code == 1) {
                // console.log("制造商列表", res)
                this.manufacturerlist = res.data
            }
            if (res.code == 401) {
                this.$router.push({ path: '/login' })
            }
        },
        selectmanufacturer(val) {
            console.log("item", val, this.manufacturerlist)

            this.manufacturerlist.forEach((item, index) => {
                if (item.manufacturer_name == val) {
                    this.formbalance.manufacturer_site = item.manufacturer_site
                    this.formbalance.liaisons = item.liaisons
                    this.formbalance.manufacturer_mobile = item.manufacturer_mobile
                    this.formbalance.manufacturer_postcode = item.manufacturer_postcode
                    this.formbalance.remark = item.remark
                }
            })
            console.log("000000",this.formbalance)
            // this.formbalance.manufacturer_name = item
            // this.formbalance = item
        },
        gotoAdress() {
            console.log("制造商数据", this.formbalance)
            localStorage.setItem("formbalance", JSON.stringify(this.formbalance))

            this.$router.push({ path: '/mine/address', query: { show: true } })


        },


        //收货地址
        selectsadress(index, id) {
            this.cutfIndex = index
            this.delivery = id
        },
        //发票地址
        selectfadress(index, id) {
            this.curIndex = index
            this.invoicesite = id
            this.$forceUpdate()
            console.log("index", this.curIndex, index, id)

        },

        submitOrder(formName) {
            debounce(() => {
                this.handleSubmitOrder(formName)
            }, 500)
        },

        async handleSubmitOrder(formName) {

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.delivery == "") {
                        this.$message({
                            message: this.$t('assemble.请选择收货地址'),
                            type: 'warning'
                        });
                    } else {
                        let data = {
                            product_id: this.formdetail.product_id,
                            num: this.formdetail.num,
                            bazaar: this.formdetail.bazaar,
                            category: this.formdetail.category,
                            brand: this.formdetail.authorizedbrand + ',' + this.formdetail.sonauthorizedbrand,
                            product: this.formdetail.product + ',' + this.formdetail.productdesc,
                            user_area_id: this.formdetail.userarea,
                            remark: this.formbalance.remark,
                            delivery: this.delivery,
                            invoice_type: this.formbalance.invoice_type,
                            invoice_name: this.formbalance.invoice_name,
                            invoice_number: this.formbalance.invoice_number,
                            invoice_opening: this.formbalance.invoice_opening,
                            invoice_bank: this.formbalance.invoice_bank,
                            invoice_mobile: this.formbalance.invoice_mobile,
                            manufacturer_name: this.formbalance.manufacturer_name,
                            manufacturer_site: this.formbalance.manufacturer_site,
                            liaisons: this.formbalance.liaisons,
                            manufacturer_mobile: this.formbalance.manufacturer_mobile,
                            manufacturer_postcode: this.formbalance.manufacturer_postcode,
                            electronic_mobile: this.formbalance.electronic_mobile,
                            electronic_email: this.formbalance.electronic_email
                        }
                        console.log("下单数据", data)
                        // let res = await createorder(data)
                        const loading = this.$loading({
                            lock: true,
                            text: this.$t('assemble.正在下单'),
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        createorder(data).then((res) => {

                            if (res.code == 1) {
                                loading.close();
                                console.log("wwwwwwwwww", res)
                                this.$message({
                                    message: this.$t('assemble.提交成功'),
                                    type: 'success'
                                });
                                localStorage.setItem("kaipiaomessage", JSON.stringify(this.formbalance))
                                localStorage.setItem("electronic_mobile", this.formbalance.electronic_mobile)
                                localStorage.setItem("electronic_email", this.formbalance.electronic_email)
                                localStorage.removeItem("ReorderData")
                                this.formdetail.product_id = ""
                                this.formdetail.num = ""
                                this.formdetail.bazaar = ""
                                this.formdetail.category = ""
                                this.formdetail.authorizedbrand = ""
                                this.formdetail.sonauthorizedbrand = ""
                                this.formdetail.product = ""
                                this.formdetail.productdesc = ""
                                this.formdetail.standby = ""
                                this.formbalance.remark = ""
                                this.delivery = ""
                                // this.invoicesite = ""
                                this.formbalance.invoice_type = ""
                                this.formbalance.invoice_name = ""
                                this.formbalance.invoice_number = ""
                                this.formbalance.invoice_opening = ""
                                this.formbalance.invoice_bank = ""
                                this.formbalance.invoice_mobile = ""
                                this.formbalance.manufacturer_name = ""
                                this.formbalance.manufacturer_site = ""
                                this.formbalance.liaisons = ""
                                this.formbalance.manufacturer_mobile = ""
                                this.formbalance.manufacturer_postcode = ""
                                this.$router.push({ path: '/mine/orderlist' })

                            } else {
                                loading.close();
                                this.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                            }
                            if (res.code == 401) {
                                this.$router.push({ path: '/login' })
                            }
                        })
                    }



                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

            // console.log('下单数据', this.formdetail, this.formbalance, this.formkaipiao)

        },
        gotohome() {
            this.$router.push({ path: '/' })
        },
    }
}

</script>
<style scoped lang="scss">
.balance {
    background: #F8F8F8;
    height: 100%;

    .balanceheader {
        width: 100vw;
        height: 80px;
        background: #E00000;
        opacity: 1;
        padding: 12px 85px;
        box-sizing: border-box;
        display: flex;
        position: fixed;
        top: 0;
        z-index: 99;

        .header-logo {
            width: 158.42px;
            height: 56px;
            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .header-content {
            display: flex;
            flex: 1;
            justify-content: space-between;
            align-items: center;

            .header-content-left {
                width: 1000px;
                font-size: 16px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 19px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-left: 65px;

                .line {
                    width: 1px;
                    height: 40px;
                    opacity: 1;
                    background-color: #FFFFFF;
                }

                .avatarandusername {
                    width: 150px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    cursor: pointer;

                    .avatar {
                        width: 40px;
                        height: 40px;
                        opacity: 1;
                        border-radius: 40px;
                    }

                    .name {
                        width: 110px;
                        font-size: 17px;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 19px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                }

            }

            .curpointer {
                cursor: pointer;
                display: flex;
                align-items: center;
                position: relative;

                i {
                    margin-right: 5px;
                }

                .inputbox {
                    width: 576px;
                    height: 40px;
                    background: #FFFFFF;
                    border-radius: 10px 10px 10px 10px;
                    opacity: 1;
                    margin-left: 10px;
                    overflow: hidden;
                }

                .search {
                    width: 64px;
                    height: 38px;
                    background: linear-gradient(315deg, #E00000 0%, #FF2424 100%);
                    border-radius: 10px 10px 10px 10px;
                    opacity: 1;
                    text-align: center;
                    line-height: 32px;
                    position: absolute;
                    right: 1px;
                }
            }

            .header-content-rigth {
                width: 166px;
                display: flex;
                font-size: 12px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 300;
                color: #FFFFFF;
                justify-content: space-between;

            }
        }
    }

    .product-box {
        width: 1200px;
        padding: 0 20px;
        box-sizing: border-box;
        margin: 20px auto;
        // margin-top: 100px;

        .productmessage {
            width: 100%;
            height: 287px;
            background: #FFFFFF;
            // background-color: red;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;

            .productmessage-box {
                width: 100%;
                height: 57px;
                background: #EDEDED;
                border-radius: 10px 10px 0px 0px;
                opacity: 1;
                display: flex;
                justify-content: space-between;
                font-size: 15px;

                p {
                    &:nth-of-type(1) {
                        width: 860px;
                        text-align: center;
                    }

                    &:nth-of-type(2) {
                        width: 100px;
                        text-align: center;
                    }

                    &:nth-of-type(3) {
                        width: 150px;
                        text-align: center;
                    }

                    &:nth-of-type(4) {
                        width: 150px;
                        text-align: center;
                    }

                }

            }

            .productmessagebottom {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;

                .promessage {
                    width: 790px;
                    height: 160px;
                    border-radius: 10px 10px 10px 10px;
                    opacity: 1;
                    border: 1px solid #EDEDED;
                    margin-top: 30px;
                    display: flex;
                    align-items: center;
                    // justify-content: center;

                    .message-img {
                        width: 280px;
                        height: 160px;
                        border-right: 1px solid #EDEDED;
                        padding: 20px;
                        box-sizing: border-box;

                        img {
                            width: 240px;
                            height: 120px;
                            border-radius: 10px 10px 10px 10px;
                            opacity: 1;
                        }
                    }

                    .ewm-box {
                        padding: 10px 25px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        border-right: 1px solid #EDEDED;

                        img {
                            width: 100px;
                            height: 100px;
                            border-radius: 0px 0px 0px 0px;
                            opacity: 1;
                        }


                        p {
                            margin: 0;
                            font-size: 12px;
                            font-family: PingFang SC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                            line-height: 15px;
                            margin-top: 7px;
                        }
                    }

                    .name {
                        width: 570px;
                        font-size: 14px;
                        font-family: PingFang SC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #333333;
                        line-height: 21px;
                    }

                }
            }

        }

        .productdetail {
            width: 100%;
            height: 340px;
            background: #FFFFFF;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            margin-top: 20px;
            padding: 40px 140px;
            box-sizing: border-box;

            .detailmessage {
                display: flex;
                justify-content: space-between;

                .inputbox {
                    display: flex;
                    width: 750px;
                    align-items: center;
                    margin-bottom: 30px;

                    .mar {
                        margin-right: 20px;
                    }

                }

                .lable {
                    width: 190px;
                    height: 17px;
                    font-size: 16px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    line-height: 19px;
                    text-align: right;
                    margin-right: 10px;
                }
            }

            .dis {
                display: flex;

                .inputbox {
                    display: flex;
                    width: 750px;
                    align-items: center;
                    margin-bottom: 30px;

                    .mar {
                        margin-right: 20px;
                    }

                }

                .lable {
                    width: 230px;
                    height: 17px;
                    font-size: 16px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    line-height: 19px;
                    text-align: right;
                    margin-right: 20px;
                }
            }
        }

        .balance {
            width: 100%;
            height: 388px;
            background: #FFFFFF;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            margin-top: 20px;
            padding: 40px 140px;
            box-sizing: border-box;

            .title {
                font-size: 15px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #0a0a0a;
                line-height: 23px;
            }

            .balancebox {

                display: flex;
                justify-content: space-between;

                .inputbox {
                    display: flex;
                    width: 750px;
                    align-items: center;
                    margin-bottom: 30px;

                    .lable {
                        width: 190px;
                        height: 17px;
                        font-size: 16px;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        line-height: 19px;
                        text-align: right;
                        margin-right: 10px;
                    }
                }
            }
        }

        .songaddress {
            width: 100%;
            background: #FFFFFF;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            margin-top: 20px;
            padding: 40px 150px;
            box-sizing: border-box;

            .titleandadd {
                font-size: 15px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 19px;
                display: flex;
                // justify-content: space-between;

            }

            .addresslist {
                margin-top: 20px;

                .addressbox {
                    width: 420px;
                    // height: 100px;
                    border-radius: 10px 10px 10px 10px;
                    opacity: 1;
                    border: 1px solid #B1B1B1;
                    display: inline-block;
                    margin-left: 10px;
                    margin-bottom: 10px;
                    padding: 0 20px;
                    box-sizing: border-box;
                    cursor: pointer;
                    position: relative;

                    .defaul {
                        font-size: 14px;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #E00000;
                        line-height: 17px;
                        position: absolute;
                        top: 0px;
                        right: 10px;
                    }

                    .gongsi {
                        font-size: 15px;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        line-height: 19px;
                    }

                    .text {
                        font-size: 13px;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #818181;
                        line-height: 17px;
                        width: 100%;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                .red {
                    border: 1px solid #FF2424;

                }

            }
        }

        .bottom {
            width: 350px;
            height: 100px;
            margin: 50px auto;

            .btn {
                width: 350px;
                height: 45px;
                background: linear-gradient(315deg, #E00000 0%, #FF2424 100%);
                border-radius: 22px 22px 22px 22px;
                opacity: 1;
                font-size: 14px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 41px;
                text-align: center;
                cursor: pointer;
            }

            p {
                width: 350px;
                font-size: 16px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 300;
                color: #B1B1B1;
                line-height: 19px;
                text-align: center;
            }
        }
    }

}

.el-select {
    width: 100%;
}

::v-deep .el-form-item__label {
    font-size: 15px;
    line-height: 20px;
    width: 200px;
}
</style>